<template>
  <div class="content scrollbar-custom bg-color">
    <div class="search" v-bind:class="{ 'fixed-search': $store.state.fixedNav }">
      <Nav @menuClick="menuClick"/>
    </div>
    <div class="main-content" v-bind:class="{ 'fixed-content': $store.state.fixedNav }">
      <div class="left">
        <div class="animate__animated animate__slideInLeft">
          <note-menu @menuClick="menuClick"/>
        </div>

        <!--        <div class="user-content">-->
        <!--          <user />-->
        <!--        </div>-->
        <!--class="reader-category"-->
        <div v-show="$store.state.catalogs.length > 0" ref="catalog_container" class="animate__animated animate__slideInLeft"
             :style="{'position':offset > initCatalogOffset ? 'fixed':'static', 'top':offset > initCatalogOffset ? '48px':'0px','z-index':1,'width':'280px'}">
          <catalog />
        </div>
        <!--        <div style="position: fixed;bottom: 100px;left: 2px;width:100px;background-color: #112140;z-index: 99;color:white;">{{offset}}-{{initCatalogOffset}}</div>-->
      </div>

      <!--      <div class="live2d-content">-->
      <!--        <live2d/>-->
      <!--      </div>-->

      <div class="center ">
        <note-content :notebook="menu" :note="note" class="animate__animated animate__fadeIn"/>
      </div>

      <!--      <div class="right">-->
      <!--        <div class="card-color card-margin" >-->
      <!--          <div v-if="$store.state.chooseMenuId">-->
      <!--            <category />-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <div class="card-color card-margin reverse zh_border" style="padding: 24px;">-->
      <!--          大<br>鹏<br>一<br>日<br>同<br>风<br>起<br>，<br>扶<br>摇<br>直<br>上<br>九<br>万<br>里<br>.-->
      <!--        </div>-->
      <!--        &lt;!&ndash;<note :notebook="menu" @noteClick="noteClick"/>&ndash;&gt;-->
      <!--      </div>-->
    </div>

    <div class="footer">
      <div style="text-align: center;line-height: 50px;margin:0;">
        <span
          style="font-size: 1.1em;font-style: italic;font-weight: bold;">copyright@https://leiserver.oicp.vip/ </span>
      </div>
      <div class="side-toolbar">
        <el-tooltip effect="light" content="回到顶部" placement="left">
          <div v-show="$store.state.fixedNav" class="back-top hover-shadow" @click="toScrollTop">
            <i class="el-icon-caret-top"></i>
          </div>
        </el-tooltip>
        <el-tooltip effect="light" content="QQ" placement="left">
          <div @click="toUrl('https://support.qq.com/products/14800')" class="back-top hover-shadow">
            <icon-svg icon-class="QQ"/>
          </div>
        </el-tooltip>
        <el-tooltip effect="light" content="我的CSDN" placement="left">
          <div @click="toUrl('https://blog.csdn.net/qq2523208472')" class="back-top hover-shadow">
            <icon-svg icon-class="csdn"/>
          </div>
        </el-tooltip>
        <el-tooltip effect="light" content="我的Gitee" placement="left">
          <div @click="toUrl('https://gitee.com/zhangdanmgr')" class="back-top hover-shadow">
            <icon-svg icon-class="github"/>
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/iconfont.css'
import '../../assets/main.css'
import '../../assets/index.css'
import '../../assets/screen.css'

import noteMenu from '../menu/index'
import noteContent from '../content/index'
import Nav from '../nav/index'
import { getScrollTop, toScrollTop } from '../../utils/utils'
import catalog from '../catalog/index'
import IconSvg from '../../components/icon'

export default {
  components: {
    noteContent,
    noteMenu,
    Nav,
    IconSvg,
    catalog
  },
  data: function () {
    return {
      test: false,
      input: 'tst',
      page: {
        current: 1,
        size: 999,
        total: 0
      },
      showDingYueHao: false,
      showWeiXin: false,
      menu: {},
      note: {},
      offset: 0, // 滚动条位置
      initCatalogOffset: 251 // 目录的初始位置
    }
  },
  watch: {
    '$store.state.catalogs': function () {
      if (this.$store.state.catalogs && this.$store.state.catalogs.length > 0) {
        this.getCatalogOffsetTop()
      }
    }
  },
  created () {

  },
  mounted () {
    window.addEventListener('scroll', this.throttle(this.handleScroll, 50))
  },
  destroyed () {
    window.removeEventListener('scroll', this.throttle(this.handleScroll, 50))
  },
  methods: {
    toScrollTop: function () {
      toScrollTop()
    },
    handleScroll: function (t) {
      const of = getScrollTop()
      if (of > 50) {
        this.$store.state.fixedNav = true
      } else {
        this.$store.state.fixedNav = false
      }
      this.offset = of
    },
    getCatalogOffsetTop: function () {
      if (this.initCatalogOffset === 251) {
        this.initCatalogOffset = this.$refs.catalog_container.getBoundingClientRect().top || 251
        setTimeout(this.getCatalogOffsetTop, 50)
      }
    },
    menuClick: function (menu) {
      menu.time = new Date()
      this.menu = JSON.parse(JSON.stringify(menu))
    },
    noteClick: function (note) {
      this.note = note
    },
    throttle: function (after, wait) {
      /* option说明：after [回调函数];
        wait  [周期性执行回调间隔时间ms] */
      let timer
      let isScroll // 是否正在执行回调
      return function () {
        if (isScroll) return // 在回调函数未执行完以前
        isScroll = true
        timer && clearTimeout(timer)
        timer = setTimeout(function () {
          after && after()
          isScroll = false
          timer = null
        }, wait)
      }
    }
  }
}
</script>
